<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Travel Sharer</title>
    <link rel="stylesheet" href="css/font-family.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="login-box">
        <div class="close-login">
            <a href="index.html"> <img src="img/close.png" alt=""></a>
        </div>
        <!-- 注册 start -->
        <div class="login-form sing-up">
            <h3>Sign Up</h3>
            <div class="form-box">
                <div class="box-left">
                    <div class="box-input">
                        <input type="text" placeholder="Email">
                    </div>
                    <div class="box-input">
                        <input type="text" placeholder="Password">
                    </div>
                    <div class="box-input">
                        <input type="text" placeholder="Retype password">
                    </div>
                    <div class="box-input">
                        <button>Go</button>
                    </div>
                    <div class="box-input">
                        <span class="login-tip">Already a member ? <a id="sing-up" class="link-login">Log in</a></span>
                    </div>
                </div>
                <div class="box-line"></div>
                <div class="box-right">
                    <div class="box-input">
                        <button class="btn-fb">Sign up with Facebook</button>
                    </div>
                    <div class="box-input">
                        <button class="btn-gl">Sign up with Google+</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 注册 end -->

        <!-- 登录 start -->
        <div class="login-form log-in">
            <h3>Log in</h3>
            <div class="form-box">
                <div class="box-left">
                    <div class="box-input">
                        <input type="text" placeholder="Email">
                    </div>
                    <div class="box-input">
                        <input type="text" placeholder="Password">
                    </div>
                    <div class="box-input checkbox-box">
                        <div class="checkbox-div">
                            <input class="box-checkbox" type="checkbox" placeholder="Retype password">
                            <span>Remember Me </span>
                        </div>
                        <span style="float: right;"><a id="reset-pwd" class="link-login">Forgot password?</a></span>
                    </div>
                    <div class="box-input">
                        <button>Log in</button>
                    </div>
                    <div class="box-input">
                        <span class="login-tip">Don't have an account ? <a id="log-in" class="link-login">Sign Up</a></span>
                    </div>
                </div>
                <div class="box-line"></div>
                <div class="box-right">
                    <div class="box-input">
                        <button class="btn-fb">Log in with Facebook</button>
                    </div>
                    <div class="box-input">
                        <button class="btn-gl">Log in with Google+</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 登录 end -->

        <!-- 忘记密码 start -->
        <div class="login-form reset-pwd">
            <h3>Reset Password</h3>
            <p>Please enter your email address</p>
            <div class="reset-box">
                <div class="reset-input">
                    <input type="text" placeholder="Email">
                </div>
                <div class="reset-input">
                    <button>Go</button>
                </div>
            </div>
        </div>
        <!-- 忘记密码 end -->
    </div>
    <script>
        $("#sing-up").click(function(){
            $(".sing-up").hide();
            $(".log-in").show();
            $(".reset-pwd").hide();
        })

        $("#log-in").click(function(){
            $(".sing-up").show();
            $(".log-in").hide();
            $(".reset-pwd").hide();
        })

        $("#reset-pwd").click(function(){
            $(".reset-pwd").show();
            $(".sing-up").hide();
            $(".log-in").hide();
        })
    </script>
</body>
</html>